// 1. 鼠标移入火箭会出现循环切换状态的动画, 0%-100% 然后再从 100%-0%
// 2. 页面滚动到一定的距离火箭才会出现, 否则就隐藏
// 3. 页面滚动的速度由慢变快
// 4. 火箭和页面滚动条同时到达顶部 (使用定时器设置页面的滚动Top)

// 注意: 
// 获取文档的 scrollTop 需要获取html元素才有值
// 获取方式: document.documentElement.scrollTop 
// 原因: w3c定义body的时候默认scrollTop为0

let rocket = document.querySelector(".rocket");

// 点击火箭让页面向上滚动
rocket.addEventListener("click", function () {
  // 记录当前页面距离顶部的值
  let htmlTop = document.documentElement.scrollTop;
  // 记录火箭距离顶部的值
  let rocketTop = rocket.offsetTop;
  // 记录定时器ID(方便停止)
  let timer;
  // 控制页面上升的速度 (必须需要变动)
  let speed = 0;

  // 定时器完成页面不断上升的功能
  // 1000 / 60hz = 每一帧需要执行的ms 
  timer = setInterval(function () {
    // 判断是否到达顶部
    if (document.documentElement.scrollTop <= 0) {
      clearInterval(timer);
    };

    // speed 每20ms执行一次, 把火箭距离顶部的值分若干个等分(分块处理), 可以控制火箭升空的速度
    // speed 进行累加处理, 达到慢到快的效果
    speed += rocket.offsetTop / 1000;

    // 火箭上升到顶部
    // rocket.style.bottom = speed + 'px';
    rocket.style.top = rocket.offsetTop - speed  + 'px';

    // 页面上升到顶部
    // 页面Top初始值 / 火箭Top初始值
    // =
    // 更新页面Top / 更新火箭Top

    //  更新页面Top = 更新火箭Top * 页面Top初始值 / 火箭Top初始值
    document.documentElement.scrollTop = rocket.offsetTop * htmlTop / rocketTop;
  }, 20);
});


//  监听页面滚动
document.addEventListener("scroll", function () {
  // 当前页面距离顶部的值
  // console.log(document.documentElement.scrollTop);
  if (document.documentElement.scrollTop <= 300) {
    // 到达隐藏距离
    rocket.style.cssText = "display:none;bottom:0px";
  } else {
    // 火箭回到原位置 (重写行内样式)
    rocket.style.display = "block";
  }
});